.listbtn {
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    background-color: #fff0;
    border: none;
    outline: none;
}

.listbtn span {
    position: absolute;
    width: 1.2rem;
    height: .20rem;
    background: #e9e8e8;
    transition: all 0.3s linear;
}

    .listbtn span::before {
        content: "";
        position: absolute;
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        background: gray;
        transition: all 0.3s linear;
    }

    .listbtn span:nth-child(1) {
        animation: span-first-off 0.5s ease-in-out;
        animation-fill-mode: forwards;
    }

    .listbtn span:nth-child(2) {
        animation: span-second-off 0.5s ease-in-out;
        animation-fill-mode: forwards;
    }

    .listbtn span:nth-child(3) {
        animation: span-third-off 0.5s ease-in-out;
        animation-fill-mode: forwards;
    }

.listbtn.on:hover span::before {
    width: 100%;
    transition: all 0.3s linear;
}

.listbtn.on span:nth-child(1) {
    animation: span-first-on 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

.listbtn.on span:nth-child(2) {
    animation: span-second-on 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

.listbtn.on span:nth-child(3) {
    animation: span-third-on 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes span-first-on {
    0% {
        transform: translate(-50%, -300%);
    }

    30% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}

@keyframes span-first-off {
    0% {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    30% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -300%);
    }
}

@keyframes span-second-on {
    0% {
        transform: translate(-50%, -50%);
    }

    25% {
        background: gray;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-150%, -50%) scale(0);
    }
}

@keyframes span-second-off {
    0% {
        transform: translate(-150%, -50%) scale(0);
    }

    25% {
        background: gray;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes span-third-on {
    0% {
        transform: translate(-50%, 200%);
    }

    30% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-50%, -50%) rotate(45deg);
    }
}

@keyframes span-third-off {
    0% {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    30% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, 200%);
    }
}